import { Row, Col, Button, Input,Grid } from 'antd';
import wx from 'weixin-js-sdk';
import React, { useRef, useEffect } from 'react';
import { getFetch } from '@/utils/doFetch';
import { ScanOutlined } from '@ant-design/icons';

const { useBreakpoint } = Grid;
let Scan = ({ value, onChange, bordered, className }) => {
    const screens = useBreakpoint();
    useEffect(() => {
        getFetch({ url: "/wbn-api/wechat/signature", params: { url: document.URL } }).then(res => {
            if (res.code == 0) {
                wx.config({
                    debug: false,
                    appId: res.data.app_id,
                    timestamp: res.data.timestamp,
                    nonceStr: res.data.nonce_str,
                    signature: res.data.signature,
                    jsApiList: [
                        "scanQRCode"
                    ]
                })
                wx.ready(function () {
                })
                wx.error(function (err) {
                })
            }
        })
    }, []);

    return (
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Input
                style={{ flex: 1 }}
                bordered={bordered}
                className={className}
                value={value}
                onChange={(e)=>{
                    onChange(e.target.value)
                }}
                addonAfter={
                    (screens.xs && !screens.sm) &&
                    <ScanOutlined onClick={() => {
                        wx.scanQRCode({
                            needResult: 1,
                            scanType: ["qrCode", "barCode"],
                            success: function (res) {
                                onChange(res.resultStr?res.resultStr.split(",")[1]:"")
                            }
                        })
                    }} />
                }
            >
            </Input>

        </div>

    )
}

export default Scan